<template>
    <div> 
    <Title :title="title"></Title>
    <div>
        <div style="height: 200px;" ref = "box1"></div>
     </div>
    </div>
</template>
<script setup>
//1
import {ref,onMounted} from 'vue';//3生命周期

import { Pie } from '@antv/g2plot';
import Title from'./Title.vue'
import{get} from '@/utils/request.js';//4步引用
//8声明空数组接受后端设备数据
const empData = ref([]);
const title = ref('设备状态分布');
const box1 = ref(null);
//2声明饼图构造函数
const loadPie = ()=>{
    //复制粘贴
    const piePlot = new Pie(box1.value, {//此行需要更改
  appendPadding: 10,
  //9步
  data:empData.value,//此行需要更改
  angleField: 'value',
  colorField: 'type',
  radius: 0.9,
  color:['pink','red'],
  label: {
    type: 'outer',
    offset: '-30%',
    // content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
    content:'{name}{value}个',
    style: {
      fontSize: 12,
      textAlign: 'center',
      fill:'white'
    },
  },
  //图例
  legend:{
    position:"right",
    itemName:{
        style:{
            fill:"white"
        }
    }
  },
  interactions: [{ type: 'element-active' }],
});

piePlot.render();
}
//5,6两步：声明设备在线离线
const getEmpData = async()=>{
    //get(url,[])
let response = await get('/dashboard/queryDeviceOnlineNumber')
console.log(response);
//8
empData.value = response.data;
}
//3引进生命周期
onMounted(async()=>{
    //7调用函数
   await getEmpData();
    //输出图，非此步
loadPie();
})
</script>

<style lang="less">
    
</style>